<template>
	<view class="page-cont" :style="useTheme.theme">
		<navbar title="告警通知记录"></navbar>
		<scroll-view class="main-cont" :style="{height: pageHeight}" scroll-y refresher-enabled
			:refresher-triggered="isRefresh" @refresherrefresh="handlePullDownRefresh"
			@scrolltolower="handleReachBottom">
			<!-- tab栏 -->
			<tab :tabActive="tabActive" :tabs="tabs" @tabChange="handleTabChange"></tab>
			<!-- 列表 -->
			<view class="record-list" v-if="recordList&&recordList.length">
				<view class="record-list-item" v-for="(item, index) in recordList" :key="index">
					<view class="record-list-box">
						<view class="record-list-item-row">
							<view class="record-list-item-title">接收人</view>
							<view class="record-list-item-value">{{item.username}}</view>
						</view>
						<view class="record-list-item-row">
							<view class="record-list-item-title">推送类型</view>
							<view class="record-list-item-value">{{pushType[item.type]}}</view>
						</view>
						<view class="record-list-item-row">
							<view class="record-list-item-title">发送时间</view>
							<view class="record-list-item-value">{{item.createTime}}</view>
						</view>
						<view class="record-list-item-row" v-if="tabActive == 2">
							<view class="record-list-item-title">接收时间</view>
							<view class="record-list-item-value">{{item.createTime}}</view>
						</view>
						<view class="record-list-item-row">
							<view class="record-list-item-title">发送状态</view>
							<view
								:class="['record-list-item-value', item.status == 1 ? 'status-success' : 'status-fail']">
								{{item.status == 1 ? '成功' : '失败'}}</view>
						</view>
						<view class="record-list-item-row">
							<view class="record-list-item-title">是否已读</view>
							<view class="record-list-item-value">{{item.name4}}</view>
						</view>
						<view class="record-list-item-row" v-if="tabActive == 2">
							<view class="record-list-item-title">说明</view>
							<view class="record-list-item-value">{{item.name5}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 空白数据 -->
			<view class="empty-text" v-else>
				暂无相关数据
			</view>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, watch } from 'vue';
	import { onShow, onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
	import { storeToRefs } from 'pinia';
	import { useNavbar, useDict } from "@/utils/hooks.js";
	import { getWarnLog } from "@/api/warn.js";
	import useThemeStore from '@/store/theme';
	import useHomeStore from '@/store/home';
	const useTheme = useThemeStore();
	const homeStore = useHomeStore();
	const { pageHeight } = useNavbar();
	const { pushType } = useDict();
	const tabs = ref(["APP记录", "短信记录", "语音记录"]);
	const tabList = ref(["app", "dx", "yy"])
	const tabActive = ref(0)
	const { warnId, projectId } = storeToRefs(homeStore);
	const isRefresh = ref(false)
	const recordList = ref([])
	const page = reactive({
		pageNum: 1,
		pageSize: 10,
		total: 0
	})

	onShow(() => {

	});

	onLoad(() => {
		getList();
	});

	// 获取列表数据
	function getList() {
		if (!warnId.value) {
			return;
		}
		let params = {
			pageNum: page.pageNum,
			pageSize: 9999,//page.pageSize,
			wid: 14684,///warnId.value,
		};
		getWarnLog(params).then(res => {
			isRefresh.value = false;
			let pageData = res.pageData || {};
			page.total = pageData.total || 0;
			recordList.value = (pageData.list || []).filter(element => {
				let type = tabList.value[tabActive.value];
				if (type == "app") {
					// app
					return element.wx > 0;
				}
				if (type == "dx") {
					// 短信
					return element.dx > 0;
				}
				if (type == "yy") {
					// 语音
					return element.yy > 0;
				}
				return true;
			});
		});
	}

	// 下拉刷新
	const handlePullDownRefresh = () => {
		isRefresh.value = true;
		page.pageNum = 1;
		getList();
	}

	// 上拉加载更多
	const handleReachBottom = () => {
		if (page.pageNum * page.pageSize < page.total) {
			page.pageNum++;
			getList();
		}
	}

	// tab切换
	function handleTabChange(e) {
		tabActive.value = e;
		page.pageNum = 1;
		getList();
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			overflow: hidden;
			overflow-y: auto;
		}

		.record-list {
			padding: 20rpx;

			.record-list-item {
				margin-top: 30rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;

				&:first-child {
					margin-top: 0;
				}
			}

			.record-list-box {
				padding: 0 20rpx;
				border-radius: 5rpx;
				background-color: #F2F3F9;
			}

			.record-list-item-row {
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #ccc;

				&:last-child {
					border: none;
				}
			}

			.record-list-item-title,
			.record-list-item-value {
				width: 200rpx;
				color: #999;
				font-size: 25rpx;
			}

			.record-list-item-value {
				width: calc(100% - 200rpx);
				color: #333;
				font-weight: 600;
				text-align: right;
			}

			.status-success {
				color: $theme-color;
			}

			.status-fail {
				color: #E65157;
			}
		}
		
		
		.empty-text {
			width: 100vw;
			text-align: center;
			position: absolute;
			top: 40%;
			color: #666;
			font-size: 28rpx;
		}
	}
</style>